<template>
  <div class="dialog-bg">
    <div class="saveAsFileDialog">
      <div class="title">
        <span class="title-tip">{{$t("message.cadViewer.tl_menu_file.save_as")}}</span>
        <i class="el-icon-close" @click="onCancelClick"></i>
      </div>
      <div class="saveAsFileDialog-body">
        <div class="markup-view">
          <el-input placeholder :disabled="showMode == 1" v-model="value" class="ipt">
            <template v-if="showMode!=1" slot="prepend">Markup</template>
            <template slot="append">.xml</template>
          </el-input>
          <button class="markup-btn" @click="onOkClick">Ok</button>
        </div>
        <div class="markup-file-view">
          <span
            class="markup-file-message"
          >{{$t('message.cadViewer.saveAsFileDialog.title_message')}}</span>
          <button class="markup-btn-cancel" @click="onCancelClick">Cancel</button>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">用户名 :</span>
          <el-input
            placeholder="请输入内容"
            v-model="userName"
            :disabled="showMode == 1"
            clearable
            class="markup-form-input"
          ></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">部 门 :</span>
          <el-input
            placeholder="请输入内容"
            v-model="userDept"
            :disabled="showMode == 1"
            clearable
            class="markup-form-input"
          ></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">公 司 :</span>
          <el-input
            placeholder="请输入内容"
            v-model="userCompany"
            :disabled="showMode == 1"
            clearable
            class="markup-form-input"
          ></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">地 址 :</span>
          <el-input
            placeholder="请输入内容"
            v-model="userAddr"
            :disabled="showMode == 1"
            clearable
            class="markup-form-input"
          ></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">电 话 :</span>
          <el-input
            placeholder="请输入内容"
            v-model="userTel"
            :disabled="showMode == 1"
            clearable
            class="markup-form-input"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导出模块
export default {
  // 模块名字
  name: "saveAsFileDialog",
  props: {
    showMode: {
      // 0 create  1 查看  2 saveas
      type: Number,
      default: 0,
    },

    markupFileData: {
      type: Object,
      default: null,
    },

    markupFileBaseData: {
      type: Object,
      default: null,
    },
  },
  // 模块数据
  data() {
    //数据
    return {
      value: "",
      userName: "",
      userDept: "",
      userCompany: "",
      userAddr: "",
      userTel: "",
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    onCancelClick() {
      this.$emit("onCancelClick", null);
    },
    onOkClick() {
      debugger;
      var re = null;

      if (this.showMode != 1) {
        re = {};
        if (this.value) re.value = "Markup_" + this.value;
        if (this.userName) re.userName = this.userName;
        if (this.userDept) re.departName = this.userDept;
        if (this.userCompany) re.companyName = this.userCompany;
        if (this.userAddr) re.address = this.userAddr;
        if (this.userTel) re.phoneNumber = this.userTel;
      }
      this.$emit("onOkClick", re);
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    debugger;
    if (this.markupFileBaseData != null && this.showMode == 1) {
      this.value = this.markupFileBaseData.value;
      this.userName = this.markupFileBaseData.userName;
      this.userDept = this.markupFileBaseData.departName;
      this.userCompany = this.markupFileBaseData.companyName;
      this.userAddr = this.markupFileBaseData.address;
      this.userTel = this.markupFileBaseData.phoneNumber;
    }

    if (this.markupFileData != null && this.showMode == 1) {
      this.value = this.markupFileData.markUpFileName;
    }
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.dialog-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}
.saveAsFileDialog {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 488px;
  height: 354px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
    0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    .title-tip {
      margin-left: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
    .el-icon-close {
      margin-right: 24px;
      color: #000000;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .saveAsFileDialog-body {
    width: 100%;
    height: calc(100% - 40px);
    padding: 16px 24px 24px 24px;
    .markup-view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ipt {
        ::v-deep .el-input__inner {
          height: 32px;
          width: 100px;
        }
      }
      .markup-btn {
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        width: 82px;
        height: 32px;
        background: rgba(33, 61, 73, 1);
        // border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        outline: none;
      }
    }
    .markup-file-view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      .markup-file-message {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }
      .markup-btn-cancel {
        min-width: 82px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        outline: none;
        padding: 0 8px;
      }
    }
    .markup-form {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 8px;
      .markup-form-label {
        width: 50px;
        font-size: 14px;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
      }
      .markup-form-input {
        width: 224px;
        margin-left: 8px;
        ::v-deep .el-input__inner {
          width: 224px;
          height: 32px;
        }
      }
    }
  }
}
::v-deep .el-input-group {
  width: 100px;
}
</style>
